<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <script type="application/javascript" src='https://zilliz.gitee.io/welcome/js/theme-mode.js'></script>
    <link rel="stylesheet" href='https://zilliz.gitee.io/welcome/css/frameworks.min.css' />
    <link rel="stylesheet" href='https://zilliz.gitee.io/welcome/css/github.min.css' />
    <link rel="stylesheet" href='https://zilliz.gitee.io/welcome/css/github-style.css' />
    <link rel="stylesheet" href='https://zilliz.gitee.io/welcome/css/light.css' />
    <link rel="stylesheet" href='https://zilliz.gitee.io/welcome/css/dark.css' />
    <link rel="stylesheet" href='https://zilliz.gitee.io/welcome/css/syntax.css' />
    <title>feder - 你好👋，数据探索者</title>
    
    <link rel="icon" type="image/x-icon" href='/images/github.svg'>
    
    <meta name="theme-color" content="#1e2327">

    
    <meta name="description"
  content="" />
<meta name="keywords"
  content='zilliz, milvus, towhee, attu, vector database, 向量数据库' />
<meta name="robots" content="noodp" />
<link rel="canonical" href="https://zilliz.gitee.io/welcome/project/feder/" />


<meta property="og:type" content="article" />
<meta property="og:title" content="feder - 你好👋，数据探索者">
<meta property="og:description"
  content="" />
<meta property="og:url" content="https://zilliz.gitee.io/welcome/project/feder/" />
<meta property="og:site_name" content="feder" />
<meta property="og:image"
  content="https://zilliz.gitee.io/welcome">
<meta property="og:image:width" content="2048">
<meta property="og:image:height" content="1024">

<meta property="article:published_time" content="2022-07-27 15:51:45 &#43;0800 &#43;0800" />









<script async src="https://www.googletagmanager.com/gtag/js?id=G-M9ER0FSQTM"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-M9ER0FSQTM');
</script>

</head>

<body>
  <div style="position: relative">
  <header class="Header js-details-container Details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap open Details--on">
    <div class="Header-item mobile-none" style="margin-top: -4px; margin-bottom: -4px;">
      <a class="Header-link" href="https://zilliz.gitee.io/welcome">
        <svg class="octicon" height="32" viewBox="0 0 16 16" version="1.1" width="32">
          <path fill-rule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
          </path>
        </svg>
      </a>
    </div>
    <div class="Header-item d-md-none">
      <button class="Header-link btn-link js-details-target" type="button"
        onclick="document.querySelector('#header-search').style.display = document.querySelector('#header-search').style.display == 'none'? 'block': 'none'">
        <svg height="24" class="octicon octicon-three-bars" viewBox="0 0 16 16" version="1.1" width="24">
          <path fill-rule="evenodd"
            d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z">
          </path>
        </svg>
      </button>
    </div>
    <div style="display: none;" id="header-search"
      class="Header-item Header-item--full flex-column flex-md-row flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex">
      <div
        class="Header-search header-search flex-auto js-site-search position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3 scoped-search site-scoped-search js-jump-to">
        <div class="position-relative">
          <form target="_blank" action="https://www.google.com/search" accept-charset="UTF-8" method="get"
            autocomplete="off">
            <label
              class="Header-search-label form-control input-sm header-search-wrapper p-0 js-chromeless-input-container header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center">
              <input type="text"
                class="Header-search-input form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
                name="q" value="" placeholder="Search" autocomplete="off">
              <input type="hidden" name="q" value="site:https://zilliz.gitee.io/welcome">
            </label>
          </form>
        </div>
      </div>
    </div>


    <style>
  
      a.convention {
        position: relative;
        display: none;
        color: #03e9f4;
        font-size: 16px;
        text-decoration: none;
        text-transform: uppercase;
        overflow: hidden;
        transition: .5s;
        letter-spacing: 4px;
        margin-right: 5px;
      }
      
      a.convention:hover {
        background: #03e9f4;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 5px #03e9f4,
                    0 0 25px #03e9f4,
                    0 0 50px #03e9f4,
                    0 0 100px #03e9f4;
      }
      
      a.convention span {
        position: absolute;
        display: block;
      }
      
      a.convention span:nth-child(1) {
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, transparent, #03e9f4);
        animation: btn-anim1 1s linear infinite;
      }
      
      @keyframes btn-anim1 {
        0% {
          left: -100%;
        }
        50%,100% {
          left: 100%;
        }
      }
      
      a.convention span:nth-child(2) {
        top: -100%;
        right: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(180deg, transparent, #03e9f4);
        animation: btn-anim2 1s linear infinite;
        animation-delay: .25s
      }
      
      @keyframes btn-anim2 {
        0% {
          top: -100%;
        }
        50%,100% {
          top: 100%;
        }
      }
      
      a.convention span:nth-child(3) {
        bottom: 0;
        right: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(270deg, transparent, #03e9f4);
        animation: btn-anim3 1s linear infinite;
        animation-delay: .5s
      }
      
      @keyframes btn-anim3 {
        0% {
          right: -100%;
        }
        50%,100% {
          right: 100%;
        }
      }
      
      a.convention span:nth-child(4) {
        bottom: -100%;
        left: 0;
        width: 2px;
        height: 100%;
        background: linear-gradient(360deg, transparent, #03e9f4);
        animation: btn-anim4 1s linear infinite;
        animation-delay: .75s
      }
      
      @keyframes btn-anim4 {
        0% {
          bottom: -100%;
        }
        50%,100% {
          bottom: 100%;
        }
      }
          </style>
      
      <a class="convention" href="#"><span></span><span></span><span></span><span></span>
        向量连接一切：Milvus 重磅会议即将上线，敬请期待
      </a>

    <div class="Header-item Header-item--full flex-justify-center d-md-none position-relative">
      <a class="Header-link " href="https://zilliz.gitee.io/welcome">
        <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1"
          width="32">
          <path fill-rule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
          </path>
        </svg>
      </a>
    </div>
    <div class="Header-item" style="margin-right: 0;">
      <a href="javascript:void(0)" class="Header-link no-select" onclick="switchTheme()">
        <svg style="fill: var(--color-profile-color-modes-toggle-moon);" class="no-select" viewBox="0 0 16 16"
          version="1.1" width="16" height="16">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M4.52208 7.71754C7.5782 7.71754 10.0557 5.24006 10.0557 2.18394C10.0557 1.93498 10.0392 1.68986 10.0074 1.44961C9.95801 1.07727 10.3495 0.771159 10.6474 0.99992C12.1153 2.12716 13.0615 3.89999 13.0615 5.89383C13.0615 9.29958 10.3006 12.0605 6.89485 12.0605C3.95334 12.0605 1.49286 10.001 0.876728 7.24527C0.794841 6.87902 1.23668 6.65289 1.55321 6.85451C2.41106 7.40095 3.4296 7.71754 4.52208 7.71754Z">
          </path>
        </svg>
      </a>
    </div>
  </header>
</div>

  
<div>
  <main>
    <div class="gisthead pagehead bg-gray-light pb-0 pt-3 mb-4">
      <div class="px-0">
        <div class="mb-3 d-flex px-3 px-md-3 px-lg-5">
          <div class="flex-auto min-width-0 width-fit mr-3">
            <div class="d-flex">
              <div class="d-none d-md-block">
                <a class="avatar mr-2 flex-shrink-0" href="https://zilliz.gitee.io/welcome">
                  <img class=" avatar-user"
                    src="https://zilliz.gitee.io/welcome/images/avatar.png"
                    width="32" height="32"></a>
              </div>
              <div class="d-flex flex-column">
                <h1 class="break-word f3 text-normal mb-md-0 mb-1">
                  <span class="author">
                    
                    <a href="https://github.com/zilliztech" target="_blank">zilliztech</a></span><span
                    class="path-divider">/</span><strong class="css-truncate-target mr-1" style="max-width: 410px"><a
                      href="https://zilliz.gitee.io/welcome/project/feder/">feder</a></strong>
                </h1>
                <div class="note m-0">
                  Created <relative-time datetime="Wed, 27 Jul 2022 15:51:45 &#43;0800"
                    class="no-wrap">
                    Wed, 27 Jul 2022 15:51:45 &#43;0800</relative-time>

                  
                  <span class="file-info-divider"></span>
                  Modified <relative-time datetime="Wed, 03 Dec 2025 22:22:57 &#43;0000"
                    class="no-wrap">
                    Wed, 03 Dec 2025 22:22:57 &#43;0000</relative-time>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container-lg px-3 new-discussion-timeline">
      <div class="repository-content gist-content">
        <div>
          <div class="js-gist-file-update-container js-task-list-container file-box">
            <div id="file-pytest" class="file my-2">
              <div id="post-header" class="file-header d-flex flex-md-items-center flex-items-start sticky-header" style="z-index: 2">
                <div class="file-info d-flex flex-md-items-center flex-items-start flex-order-1 flex-auto">
                  <div class="text-mono f6 flex-auto pr-3 flex-order-2 flex-md-order-1 mt-2 mt-md-0">
                    
                    <summary id="toc-toggle" onclick="clickToc()" class="btn btn-octicon m-0 mr-2 p-2">
                      <svg aria-hidden="true" viewBox="0 0 16 16" height="16" width="16" class="octicon octicon-list-unordered">
                        <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
                      </svg>
                    </summary>
                    <details-menu class="SelectMenu" id="toc-details" style="display: none;">
                      <div class="SelectMenu-modal rounded-3 mt-1" style="max-height: 340px;">
                        <div class="SelectMenu-list SelectMenu-list--borderless p-2" style="overscroll-behavior: contain;" id="toc-list">
                        </div>
                      </div>
                    </details-menu>
                      608 Words
                    

                  </div>
                  <div class="file-actions flex-order-2 pt-0">
                    
                  </div>
                </div>
              </div>


              <div class="Box-body px-5 pb-5" style="z-index: 1">
                <article class="markdown-body entry-content container-lg"><h1 id="feder">Feder</h1>
<h2 id="what-is-feder">What is feder</h2>
<p>Feder is an javascript tool that built for understanding your embedding vectors, feder visualizes faiss, hnswlib and other anns index files, so that we can have a better understanding how anns work and what are high dimensional vector embeddings.</p>
<p>So far, we are focusing on the Faiss (only ivf_flat) index file and HNSWlib (hnsw) index file, we will cover more index types later.</p>
<p>Feder is written in <strong>javascript</strong>, and we also provide a python library <strong>federpy</strong>, which is based on federjs.</p>
<blockquote>
<p><strong><em>NOTE:</em></strong></p>
</blockquote>
<ul>
<li>In IPython environment, it supports users to generate the corresponding visualization directly.</li>
<li>In other environments, it supports outputting visualizations as html files, which can be opened by the user through the browser with web service enabled.</li>
</ul>
<h3 id="online-demos">Online demos</h3>
<ul>
<li><a href="https://observablehq.com/@min-tian/reverse-image-search-feder-faiss-ivf_flat-visualizations">Understanding vector embeddings with Feder by a reverse image search example</a></li>
<li><a href="https://observablehq.com/@min-tian/feder">Javascript example (Observable)</a></li>
<li><a href="https://colab.research.google.com/drive/12L_oJPR-yFDlORpPondsqGNTPVsSsUwi#scrollTo=N3qqBAYxYcbt">Jupternotebook example (Colab)</a></li>
</ul>
<h3 id="how-feder-works">How feder works</h3>
<ul>
<li><a href="https://observablehq.com/@min-tian/feder-layout-ivf_flat/2">Feder ivf layout</a></li>
<li><a href="https://observablehq.com/@min-tian/feder-layout-hnsw/2">Feder hnsw layout </a></li>
</ul>
<h3 id="wiki">Wiki</h3>
<ul>
<li><a href="https://github.com/zilliztech/feder/wiki">Usage</a></li>
</ul>
<h3 id="hnsw-visualization-screenshots">HNSW visualization screenshots</h3>
<p><img src="../../images/fig/hnsw_search.png" alt="image"></p>
<h3 id="ivf_flat-visualization-screenshots">IVF_Flat visualization screenshots</h3>
<p><img src="../../images/fig/ivfflat_coarse.png" alt="image">
<img src="../../images/fig/ivfflat_fine_polar.png" alt="image">
<img src="../../images/fig/ivfflat_fine_project.png" alt="image"></p>
<h2 id="quick-start">Quick Start</h2>
<h3 id="installation">Installation</h3>
<p>Use npm or yarn.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">yarn install @zilliz/feder
</span></span></code></pre></div><h3 id="material-preparation">Material Preparation</h3>
<p>Make sure that you have built an index and dumped the index file by Faiss or HNSWlib.</p>
<h3 id="init-feder">Init Feder</h3>
<p>Specifying the dom container that you want to show the visualizations.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Feder</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@zilliz/feder&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">feder</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Feder</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">filePath</span><span class="o">:</span> <span class="s1">&#39;faiss_file&#39;</span><span class="p">,</span> <span class="c1">// file path
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>  <span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;faiss&#39;</span><span class="p">,</span> <span class="c1">// faiss | hnswlib
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>  <span class="nx">domSelector</span><span class="o">:</span> <span class="s1">&#39;#container&#39;</span><span class="p">,</span> <span class="c1">// attach dom to render
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>  <span class="nx">viewParams</span><span class="o">:</span> <span class="p">{},</span> <span class="c1">// optional
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">});</span>
</span></span></code></pre></div><h3 id="visualize-the-index-structure">Visualize the index structure.</h3>
<ul>
<li>HNSW - Feder will show the top-3 levels of the hnsw-tree.</li>
<li>IVF_Flat - Feder will show all the clusters.</li>
</ul>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">feder</span><span class="p">.</span><span class="nx">overview</span><span class="p">();</span>
</span></span></code></pre></div><h3 id="explore-the-search-process">Explore the search process.</h3>
<p>Set search parameters (optional) and Specify the query vector.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">feder</span>
</span></span><span class="line"><span class="cl">  <span class="p">.</span><span class="nx">setSearchParams</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="nx">k</span><span class="o">:</span> <span class="mi">8</span><span class="p">,</span> <span class="c1">// hnsw, ivf_flat
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="nx">ef</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span> <span class="c1">// hnsw (ef_search)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>    <span class="nx">nprobe</span><span class="o">:</span> <span class="mi">8</span><span class="p">,</span> <span class="c1">// ivf_flat
</span></span></span><span class="line"><span class="cl"><span class="c1"></span>  <span class="p">})</span>
</span></span><span class="line"><span class="cl">  <span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="nx">target_vector</span><span class="p">);</span>
</span></span></code></pre></div><h2 id="examples">Examples</h2>
<p>We prepare a simple case, which is the visualizations of the <code>hnsw</code> and <code>ivf_flat</code> with 17,000+ vectors that embedded from <a href="http://host.robots.ox.ac.uk/pascal/VOC/voc2012/VOCtrainval_11-May-2012.tar">VOC 2012</a>).</p>
<p>Only need enable a web service.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-shell" data-lang="shell"><span class="line"><span class="cl">git clone git@github.com:zilliztech/feder.git
</span></span><span class="line"><span class="cl"><span class="nb">cd</span> <span class="nb">test</span>
</span></span><span class="line"><span class="cl">python -m http.server
</span></span></code></pre></div><p>Then open http://localhost:8000/</p>
<p>It will show 4 visualizations:</p>
<ul>
<li><code>hnsw</code> overview</li>
<li><code>hnsw</code> search view</li>
<li><code>ivf_flat</code> overview</li>
<li><code>ivf_flat</code> search view</li>
</ul>
<h2 id="pipeline---explore-a-new-dataset-with-feder">Pipeline - explore a new dataset with feder</h2>
<h3 id="step-1-dataset-preparation">Step 1. Dataset preparation</h3>
<p>Put all images to <strong>test/data/images/</strong>. (example dataset <a href="http://host.robots.ox.ac.uk/pascal/VOC/voc2012/VOCtrainval_11-May-2012.tar">VOC 2012</a>)</p>
<p>You can also generate random vectors without embedding for index building and skip to <strong>step 3</strong>.</p>
<h3 id="step-2-generate-embedding-vectors">Step 2. Generate embedding vectors</h3>
<p>Recommend to use <a href="https://github.com/towhee-io/towhee">towhee</a>, one line of code to generating embedding vectors!</p>
<p>We have the <a href="https://assets.zilliz.com/voc_vectors_e8ec5a5eae.csv">encoded vectors</a> ready for you.</p>
<h3 id="step-3-build-an-index-and-dump-it">Step 3. Build an index and dump it.</h3>
<p>You can use <a href="https://github.com/facebookresearch/faiss">faiss</a> or <a href="https://github.com/nmslib/hnswlib">hnswlib</a> to build the index.</p>
<p>(*Detailed procedures please refer to their tutorials.)</p>
<p>Referring to <strong>test/data/gen_hnswlib_index_*.py</strong> or <strong>test/data/gen_faiss_index_*.py</strong></p>
<p>Or we have the <a href="https://assets.zilliz.com/hnswlib_hnsw_voc_17k_1f1dfd63a9.index">index file</a> ready for you.</p>
<h3 id="step-4-init-feder">Step 4. Init Feder.</h3>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Feder</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@zilliz/feder&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="o">*</span> <span class="nx">as</span> <span class="nx">d3</span> <span class="nx">from</span> <span class="s1">&#39;d3&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">domSelector</span> <span class="o">=</span> <span class="s1">&#39;#container&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">filePath</span> <span class="o">=</span> <span class="p">[</span><span class="nx">index_file_path</span><span class="p">];</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">mediaCallback</span> <span class="o">=</span> <span class="p">(</span><span class="nx">rowId</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="nx">mediaUrl</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">feder</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Feder</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">filePath</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;hnswlib&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">domSelector</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">viewParams</span><span class="o">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nx">mediaType</span><span class="o">:</span> <span class="s1">&#39;img&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nx">mediaCallback</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="p">},</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><p>If use the random_data, <strong>no need</strong> to specify the mediaType.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="kr">import</span> <span class="p">{</span> <span class="nx">Feder</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;@zilliz/feder&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="kr">import</span> <span class="o">*</span> <span class="nx">as</span> <span class="nx">d3</span> <span class="nx">from</span> <span class="s1">&#39;d3&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">domSelector</span> <span class="o">=</span> <span class="s1">&#39;#container&#39;</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">filePath</span> <span class="o">=</span> <span class="p">[</span><span class="nx">index_file_path</span><span class="p">];</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">feder</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Feder</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">  <span class="nx">filePath</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">source</span><span class="o">:</span> <span class="s1">&#39;hnswlib&#39;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nx">domSelector</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"><span class="p">});</span>
</span></span></code></pre></div><h3 id="step-5-explore-the-index">Step 5. Explore the index!</h3>
<p>Visualize the overview</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">feder</span><span class="p">.</span><span class="nx">overview</span><span class="p">();</span>
</span></span></code></pre></div><p>or visualize the search process.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">feder</span><span class="p">.</span><span class="nx">search</span><span class="p">(</span><span class="nx">target_vector</span><span class="p">[,</span> <span class="nx">targetMediaUrl</span><span class="p">]);</span>
</span></span></code></pre></div><p>or randomly select an vector as the target to visualize the search process.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-js" data-lang="js"><span class="line"><span class="cl"><span class="nx">feder</span><span class="p">.</span><span class="nx">searchRandTestVec</span><span class="p">();</span>
</span></span></code></pre></div><p>More cases refer to the <strong>test/test.js</strong></p>
<h2 id="blogs">Blogs</h2>
<ul>
<li><a href="https://zilliz.com/blog/Visualize-Your-Approximate-Nearest-Neighbor-Search-with-Feder">Visualize Your Approximate Nearest Neighbor Search with Feder</a></li>
<li><a href="https://zilliz.com/blog/Visualize-Reverse-Image-Search-with-Feder">Visualize Reverse Image Search with Feder</a></li>
</ul>
<h2 id="roadmap">Roadmap</h2>
<p>We&rsquo;re still in the early stages, we will support more types of anns index, and more unstructured data viewer, stay tuned.</p>
<h2 id="acknowledgments">Acknowledgments</h2>
<ul>
<li><a href="https://github.com/facebookresearch/faiss">faiss</a></li>
<li><a href="https://github.com/nmslib/hnswlib">hnswlib</a></li>
<li><a href="https://github.com/d3/d3">d3</a></li>
</ul></article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>
<script type="application/javascript" src='https://zilliz.gitee.io/welcome/js/toc.js'></script>
<link rel="stylesheet" href='https://zilliz.gitee.io/welcome/css/toc.css' />

  <div class="footer container-xl width-full p-responsive">
  <div
    class="position-relative d-flex flex-row-reverse flex-lg-row flex-wrap flex-lg-nowrap flex-justify-center flex-lg-justify-between flex-sm-items-center pt-6 pb-2 mt-6 f6 text-gray border-top border-gray-light ">
    <a aria-label="Homepage" title="GitHub" class="footer-octicon d-none d-lg-block mr-lg-4" href="https://zilliz.gitee.io/welcome">
      <svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24">
        <path fill-rule="evenodd"
          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
        </path>
      </svg>
    </a>
    <ul class="list-style-none d-flex flex-wrap col-12 flex-justify-center flex-lg-justify-between mb-2 mb-lg-0">
      <li class="mr-3 mr-lg-0"></li>
    </ul>
  </div>
  <div class="d-flex flex-justify-center pb-6">
    <span class="f6 text-gray-light"></span>
  </div>


</div>
</body>

<script type="application/javascript" src="https://zilliz.gitee.io/welcome/js/github-style.js"></script>




</html>